<template>
  <div class="mask-div__base">
    <div class="mask-div__content">
      <h2 class="mask-h2__title">{{ viewData.name }}</h2>
      <div class="mask-div__star">
        <star-comp :score="1.99" :size="'small'"></star-comp>
      </div>
      <div class="mask-div__discount">
        <div class="discount-div__title">
          <div class="discount-div__side"></div>
          <div class="discount-div__text">优惠信息</div>
          <div class="discount-div__side"></div>
        </div>
        <ul class="discount-ul__content">
          <li
            class="discount-li__item"
            v-for="(support, index) in viewData.supports"
            :key="'sup' + index"
          >
            <icon-comp
              :iconType="support.type"
              class="discount-icon__item"
            ></icon-comp>
            <span class="text">{{ support.description }}</span>
          </li>
        </ul>
      </div>
      <div class="mask-div__board">
        <div class="board-div__title">
          <div class="board-div__side"></div>
          <div class="board-div__text">公告信息</div>
          <div class="board-div__side"></div>
        </div>
        <p class="board-p__content">{{ viewData.bulletin }}</p>
      </div>
    </div>
    <div class="mask-div__footer">
      <i class="icon-close" @click="triggerClose"></i>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import IconComp from "./../icon-comp/icon-comp.vue";
import StarComp from "./../star-comp/star-comp.vue";
// import { ref } from "@vue/composition-api";
// 触发关闭事件
function triggerClose(this: Vue) {
  this.$emit("closeMask");
}
export default Vue.extend({
  components: {
    StarComp,
    IconComp,
  },
  // 通信数据
  props: {
    viewData: {
      type: Object,
      default() {
        return {
          name: "",
          description: "",
          supports: [],
        };
      },
    },
  },
  setup(props) {
    return {
      triggerClose,
    };
  },
});
</script>
<style lang="stylus" scoped>
@import '../../common/style/mixin.styl';

$base-bgc = rgba(7, 17, 27, 0.8);
$close-color = rgba(255, 255, 255, 0.2);
$title-fontsize = 16px;
$title-fontweight = 700;
$discount-fontsize = 14px;
$discount-lineheight = 12px;
$board-fontsize = 12px;
$board-fontweight = 200;
$board-lineheight = 24px;

.mask-div__base {
  // font-size: 40px;
  padding: 64px 36px 0;
  box-sizing: border-box;
  text-align: center;
  position: fixed;
  width: 100%;
  min-height: 100%;
  top: 0;
  overflow-y: scroll;
  bottom: 0; // 重要
  left: 0;
  z-index: 10;
  background-color: $base-bgc;
  display: flex;
  flex-direction: column; // 重要
  backdrop-filter: blur(5px); // 兼容性可能不好

  .mask-div__content {
    flex-grow: 1;

    .mask-h2__title {
      font-size: $title-fontsize;
      font-weight: $title-fontweight;
      line-height: 32px;
    }

    .mask-div__star {
      padding: 16px 0 28px 0;
    }

    .mask-div__discount {
      .discount-div__title {
        display: flex;

        .discount-div__side {
          flex-grow: 1;
          transform: translateY(-50%);
          border-1px(rgba(255, 255, 255, 0.2), 2, 0.5);
        }

        .discount-div__text {
          padding: 0 12px;
          color: white;
          font-size: $discount-fontsize;
          font-weight: $title-fontweight;
        }
      }

      .discount-ul__content {
        text-align: left;
        padding: 24px 12px 28px;

        .discount-li__item {
          font-size: $board-fontsize;
          line-height: $discount-lineheight;
          margin-bottom: 12px;

          .text {
            vertical-align: middle;
          }

          .discount-icon__item {
            vertical-align: middle;
            margin-right: 6px;
            width: 16px;
            height: 16px;
          }
        }
      }
    }

    .mask-div__board {
      .board-div__title {
        display: flex;

        .board-div__side {
          flex-grow: 1;
          transform: translateY(-50%);
          border-1px(rgba(255, 255, 255, 0.2), 2, 0.5);
        }

        .board-div__text {
          padding: 0 12px;
          color: white;
          font-size: $discount-fontsize;
          font-weight: $title-fontweight;
        }
      }

      .board-p__content {
        text-align: left;
        padding: 24px 12px 28px;
        font-size: $board-fontsize;
        font-weight: $board-fontweight;
        line-height: $board-lineheight;
      }
    }
  }

  .mask-div__footer {
    font-size: 32px;
    color: $close-color;
    padding-bottom: 32px;
    bottom: 0;
    left: 50%;
    // margin-left: -16px;
  }
}
</style>
